<% content_for :googlemaps do %>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
      var centro = new google.maps.LatLng(10.463536424076864, -66.97718103149418);
      var map;

      var idmaquina;
      var onMarkerClick = function() {
        var marker = this;
        var latLng = marker.getPosition();
        //infoWindow.setContent('<a href="/maquinas/edit/'+idmaquina+'">Editar</a> <a href="/maquinas/destroy/'+idmaquina+'">Eliminar</a>');
        infoWindow.setContent('<p> Hay 50 Apuestas Asociadas a Esta Maquina </p>');
        infoWindow.open(map, marker);
      }

      
      var infoWindow=new google.maps.InfoWindow;

      function initialize() {
        var mapOptions = {
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.HYBRID,
          center: centro
        };

        map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

        google.maps.event.addListener(map, 'click', function() {
          infoWindow.close();
        });

        <% @maquinas.each do |maquina| %>
              marker = new google.maps.Marker({
                map:map,
                position: new google.maps.LatLng(<%= maquina.latitud %>,<%= maquina.longitud %>)
              });

              idmaquina=<%= maquina.id %>;
              google.maps.event.addListener(marker, 'click',onMarkerClick);
        <% end %>

    }
    </script>
<% end %>


  <div  id="map_canvas" style="width:500px; height:373px " align="left"> </div>

  <div align="center"><%= link_to '<img src="/images/back.png" alt="" width="50" height="50" />', maquinas_path%></div>
  <div align="center"><%= link_to 'Back', maquinas_path %></div>
